<template>
    <div class="wrapper">
        <div class="flex-container">
            <div class="flex-item" style="height: 500px;"></div>
            <div class="flex-gap"></div>
            <div class="flex-item" style="height: 1000px;"></div>
            <div class="flex-gap"></div>
            <div class="flex-item" style="height: 1500px;"></div>
        </div>
    </div>
</template>

<style scoped>
.wrapper {
    height: 100%;
    overflow: auto;
    background: #eee;
}

.flex-container {
    display: flex;
    justify-content: center;
}

.flex-item {
    flex: 1;
    background: #209475;
}

.flex-gap {
    flex: 0 0 30px;
    background: #ddd;
}
</style>